<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件中转站 - 简单快捷的文件分享平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-cloud-upload-alt"></i>
                <span>文件中转站</span>
            </div>
            <div class="nav-stats">
                <span id="totalFiles">总文件数: 0</span>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container">
        <!-- 上传区域 -->
        <div class="upload-section">
            <div class="upload-card">
                <div class="upload-header">
                    <i class="fas fa-upload"></i>
                    <h2>上传文件</h2>
                    <p>拖拽文件到此区域或点击选择文件</p>
                </div>
                
                <!-- 文件拖拽上传区域 -->
                <div class="drop-zone" id="dropZone">
                    <div class="drop-zone-content">
                        <i class="fas fa-cloud-upload-alt drop-icon"></i>
                        <p class="drop-text">将文件拖拽到这里</p>
                        <p class="drop-subtext">或</p>
                        <button class="btn btn-primary" id="selectFileBtn">
                            <i class="fas fa-folder-open"></i>
                            选择文件
                        </button>
                        <input type="file" id="fileInput" multiple style="display: none;">
                    </div>
                </div>
                
                <!-- 上传进度条 -->
                <div class="progress-container" id="progressContainer" style="display: none;">
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                    <div class="progress-text" id="progressText">上传中... 0%</div>
                </div>
                
                <!-- 上传限制说明 -->
                <div class="upload-info">
                    <p><i class="fas fa-info-circle"></i> 单个文件最大 500MB</p>
                    <p><i class="fas fa-file-alt"></i> 支持常见文档、图片、视频、压缩包等格式</p>
                </div>
            </div>
        </div>

        <!-- 文件列表区域 -->
        <div class="files-section">
            <div class="files-header">
                <h2><i class="fas fa-folder"></i> 文件列表</h2>
                <div class="files-actions">
                    <button class="btn btn-secondary" id="refreshBtn">
                        <i class="fas fa-sync-alt"></i>
                        刷新
                    </button>
                </div>
            </div>
            
            <!-- 搜索框 -->
            <div class="search-container">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchInput" placeholder="搜索文件名...">
                </div>
            </div>
            
            <!-- 文件列表容器 -->
            <div class="files-container" id="filesContainer">
                <div class="loading" id="loadingSpinner">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span>加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息提示框 -->
    <div class="toast" id="toast">
        <div class="toast-content">
            <span class="toast-icon"></span>
            <span class="toast-message"></span>
        </div>
    </div>

    <!-- 确认删除对话框 -->
    <div class="modal" id="deleteModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-exclamation-triangle"></i> 确认删除</h3>
            </div>
            <div class="modal-body">
                <p>您确定要删除文件 "<span id="deleteFileName"></span>" 吗？</p>
                <p class="warning-text">此操作不可撤销！</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="cancelDeleteBtn">取消</button>
                <button class="btn btn-danger" id="confirmDeleteBtn">删除</button>
            </div>
        </div>
    </div>

    <!-- 文件详情对话框 -->
    <div class="modal" id="fileDetailModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-info-circle"></i> 文件详情</h3>
                <button class="modal-close" id="closeDetailModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="fileDetailContent">
                <!-- 动态填充文件详情 -->
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>